<template>
    <div class="user-profile">
        <van-nav-bar
        class="page-nav-bar"
        title="个人信息"
        left-arrow
        @click-left="$router.back()"/>

        <div class="container">
            <input type="file" hidden ref="file" @change="onFileChange">
            <van-cell title="头像" is-link @click="$refs.file.click()">
                <van-image class="avatar" fit="cover" round :src="user.photo"/>
            </van-cell>
            <van-cell title="昵称" :value="user.name" is-link @click="isUpdateNameShow = true"/>
            <van-cell title="性别" :value="user.gender === 0 ? '男':'女'" is-link @click="isUpdateSexShow = true"/>
            <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow = true"/>
        </div>

        <!-- 修改头像 -->
        <van-popup v-model="isUpdatePhotoShow" round position="bottom" :style="{ height: '80%' }">
            <UpdatePhoto
            v-if="isUpdatePhotoShow"
            @close="isUpdatePhotoShow = false"
            @updatePhoto="user.photo = $event"
            :img="img"/>
        </van-popup>

        <!-- 修改昵称 -->
        <van-popup v-model="isUpdateNameShow" round position="bottom" :style="{ height: '60%' }">
            <UpdateName v-if="isUpdateNameShow" @close="isUpdateNameShow = false" v-model="user.name"/>
        </van-popup>

        <!-- 修改性别 -->
        <van-popup v-model="isUpdateSexShow" round position="bottom" :style="{ height: '60%' }">
            <UpdateSex v-if="isUpdateSexShow" @close="isUpdateSexShow = false" v-model="user.gender"/>
        </van-popup>

        <!-- 修改生日 -->
        <van-popup v-model="isUpdateBirthdayShow" round position="bottom" :style="{ height: '60%' }">
            <UpdateBirthday v-if="isUpdateBirthdayShow" @close="isUpdateBirthdayShow = false" v-model="user.birthday"/>
        </van-popup>
    </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/UpdateName.vue'
import UpdateSex from './components/UpdateSex.vue'
import UpdateBirthday from './components/UpdateBirthday.vue'
import UpdatePhoto from './components/UpdatePhoto.vue'

export default {
    name: 'UserProfile',
    components: {
        UpdateName,
        UpdateSex,
        UpdateBirthday,
        UpdatePhoto
    },
    data () {
        return {
            user: {},
            isUpdateNameShow: false,
            isUpdateSexShow: false,
            isUpdateBirthdayShow: false,
            isUpdatePhotoShow: false,
            img: null // 预览的图片
        }
    },
    methods: {
        async loadUserProfile () {
            try {
                const res = await getUserProfile()
                this.user = res.data.data
            } catch (error) {
                this.$toast.fail('数据获取失败')
            }
        },
        onFileChange () {
            // 获取文件对象
            const file = this.$refs.file.files[0]
            // 获取blob数据
            this.img = window.URL.createObjectURL(file)
            console.log(this.img)
            this.isUpdatePhotoShow = true

            // 防止选择同一张图片时不会触发change
            this.$refs.file.value = ''
        }
    },
    created () {
        this.loadUserProfile()
    }
}
</script>

<style scoped lang="less">
.user-profile {
    .container {
        padding-top: 90px;
    }
    .avatar {
        width: 60px;
        height: 60px;
    }
    .van-popup {
        background-color: #e6e8e9;
        /deep/ .van-nav-bar__title {
            color: #000;
        }
    }
}
</style>
